<template>
  <view class="item-card" :class="[borderColor]">
    <!-- 标题输入 -->
    <view v-if="showTitle" class="title-section">
      <view class="title-header">
        <view class="title-left">
          <text class="title-label">{{ titleLabel }}</text>
          <text v-if="required" class="required-mark">*必填</text>
        </view>
        <!-- 删除按钮 -->
        <view v-if="showDelete" @click="handleDelete" class="delete-button">
          <IconFont name="close" size="16" color="#666" />
        </view>
      </view>

      <slot name="header"></slot>
      
      <!-- 如果存在 dictCode，使用 PickerInput 组件 -->
     <view v-if="hasTitle">
        <PickerInput 
          v-if="dictCode"
          :model-value="modelValue.title"
          @update:model-value="updateTitle"
          :placeholder="titlePlaceholder"
          :title="'请选择' + titleLabel"
          :dict-code="dictCode"
          :readonly="readonly"
          :columns="[]"
        />
        
        <!-- 否则使用普通的 nut-input -->
        <nut-input 
          v-else
          :model-value="modelValue.title" 
          @update:model-value="updateTitle"
          :placeholder="titlePlaceholder"
          class="title-input"
          :class="inputClass"
        />
      </view>
    </view>

    <!-- 描述输入 -->
    <view class="description-section">
      <view class="description-header">
        <text class="description-label">{{ descriptionLabel }}</text>
      </view>
      <nut-textarea 
        :model-value="modelValue.description" 
        @update:model-value="updateDescription"
        :placeholder="descriptionPlaceholder"
        :rows="descriptionRows"
        class="description-textarea"
        :class="textareaClass"
      />
    </view>

    <slot></slot>

    <!-- 图片列表 -->
    <view v-if="showImages" class="images-section">
      <view class="images-header">
        <text class="images-label">📷  {{ imagesLabel }}</text>
        <text class="images-count">最多{{ maxImages }}张</text>
      </view>
      
      <!-- 临时调试：直接显示文本 -->
      <!-- <view class="mb-[12rpx] p-[12rpx] bg-yellow-100 rounded-[8rpx]">
        <text class="text-[22rpx] text-orange-600 font-bold">🔍 图片上传区域（测试）</text>
        <text class="block text-[20rpx] text-gray-600 mt-[4rpx]">showImages: {{ showImages }}</text>
        <text class="block text-[20rpx] text-gray-600">当前图片数: {{ (modelValue.images || []).length }}</text>
      </view> -->
      
      <view class="images-uploader">
        <ImageUploader 
          :model-value="modelValue.images || []"
          :max-count="maxImages"
          @update:model-value="updateImages"
        />
      </view>
    </view>

    <!-- 底部插槽 -->
    <slot name="footer"></slot>
  </view>
</template>

<script setup lang="ts">
import ImageUploader from './ImageUploader.vue'
import PickerInput from './PickerInput.vue'
import { IconFont } from '@nutui/icons-vue-taro'

// 定义数据类型
export interface ItemData {
  title: string
  description: string
  images?: string[]
  [key: string]: any  // 允许额外的字段
}

// Props 定义
interface Props {
  modelValue: ItemData
  
  // 标题相关
  showTitle?: boolean
  titleLabel?: string
  titlePlaceholder?: string
  
  // 描述相关
  descriptionLabel?: string
  descriptionPlaceholder?: string
  descriptionRows?: number
  
  // 图片相关
  showImages?: boolean
  imagesLabel?: string
  maxImages?: number
  
  // 删除按钮
  showDelete?: boolean
  deleteButtonText?: string
  
  // 样式相关
  borderColor?: string
  inputClass?: string
  textareaClass?: string
  
  // 验证
  required?: boolean
  
  // 字典选择相关
  dictCode?: string
  readonly?: boolean
  hasTitle?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  showTitle: true,
  titleLabel: '标题',
  titlePlaceholder: '请输入标题',
  descriptionLabel: '描述',
  descriptionPlaceholder: '请输入描述',
  descriptionRows: 3,
  showImages: true,
  imagesLabel: '图片',
  maxImages: 9,
  showDelete: false,
  deleteButtonText: '删除',
  borderColor: 'border-gray-200',
  inputClass: '',
  textareaClass: '',
  required: false,
  dictCode: undefined,
  readonly: false,
  hasTitle: true
})

// Emits 定义
const emit = defineEmits<{
  'update:modelValue': [value: ItemData]
  'delete': []
  'tap': []
}>()

// 更新标题
const updateTitle = (value: string) => {
  emit('update:modelValue', {
    ...props.modelValue,
    title: value
  })
}

// 更新描述
const updateDescription = (value: string) => {
  emit('update:modelValue', {
    ...props.modelValue,
    description: value
  })
}

// 更新图片
const updateImages = (images: string[]) => {
  emit('update:modelValue', {
    ...props.modelValue,
    images: images
  })
}

// 删除处理
const handleDelete = () => {
  emit('delete')
}
</script>

<style scoped lang="scss">
.item-card {
  padding: 20rpx;
  background-color: white;
  border-radius: 12rpx;
  border: 2px solid #e5e7eb;
  transition: all 0.3s ease;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  &:hover {
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  }
}

.title-section {
  margin-bottom: 16rpx;
}

.title-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.title-left {
  display: flex;
  align-items: center;
}

.title-label {
  font-size: 26rpx;
  font-weight: 500;
  color: #6b7280;
}

.required-mark {
  font-size: 24rpx;
  color: #ef4444;
  margin-left: 8rpx;
}

.delete-button {
  padding: 8rpx;
  cursor: pointer;
  border-radius: 8rpx;
  transition: background-color 0.2s ease;
  
  &:hover {
    background-color: #f3f4f6;
  }
}

.title-input {
  width: 100%;
}

.description-section {
  margin-bottom: 16rpx;
}

.description-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}

.description-label {
  font-size: 26rpx;
  font-weight: 500;
  color: #6b7280;
}

.description-textarea {
  width: 100%;
}

.images-section {
  margin-top: 16rpx;
}

.images-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.images-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #15803d;
}

.images-count {
  font-size: 24rpx;
  color: #16a34a;
}

.images-uploader {
  width: 100%;
}

:deep(.nut-input) {
  border-radius: 10rpx;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  font-size: 28rpx;
  
  &:focus {
    border-color: #3b82f6;
    background: #fff;
  }
}

:deep(.nut-textarea) {
  border-radius: 10rpx;
  padding: 12rpx 16rpx;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  font-size: 28rpx;
  
  &:focus {
    border-color: #3b82f6;
    background: #fff;
  }
}

// 手机端响应式优化
@media (max-width: 750rpx) {
  .item-card {
    padding: 16rpx;
    border-radius: 10rpx;
  }
  
  .title-label,
  .description-label,
  .images-label {
    font-size: 24rpx;
  }
  
  .required-mark,
  .images-count {
    font-size: 22rpx;
  }
  
  :deep(.nut-input),
  :deep(.nut-textarea) {
    padding: 10rpx 14rpx;
    font-size: 26rpx;
  }
}
</style>

